<template>
  <div
    class="author-card"
    @mouseover="showOverlay = true"
    @mouseleave="showOverlay = false"
  >
    <div
      class="background"
      :style="{ backgroundImage: `url(${author.backgroundImage})` }"
    ></div>
    <div class="info-background-cover">
        <transition name="slide-up">
      <div v-if="!showOverlay" class="info-container">
        <img class="avatar" :src="author.avatar" alt="Author Avatar" />
        <h3 class="api-name">{{ author.apiName }}</h3>
      </div>
    </transition>
    </div>
    <!-- 新增的白色背景覆盖层 -->
    <transition name="slide-up">
      <div v-if="!showOverlay" class="info-container">
        <img class="avatar" :src="author.avatar" alt="Author Avatar" />
        <h3 class="api-name">{{ author.apiName }}</h3>
      </div>
    </transition>
    <transition name="overlay-slide">
      <!-- 将v-if替换为v-show -->
      <div v-show="showOverlay" class="overlay">
        <h2 class="overlay-api-name">{{ author.apiName }}</h2>
      </div>
    </transition>
  </div>
</template>
  
  <script>
export default {
  props: {
    author: {
      type: Object,
      required: true,
      default: () => ({
        backgroundImage: "",
        avatar: "",
        apiName: "API Name",
      }),
    },
  },
  data() {
    return {
      showOverlay: false,
    };
  },
};
</script>
  
  <style scoped>
.author-card {
  position: relative;
  width: 300px;
  height: 250px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  &:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
  }
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  filter: brightness(70%);
  background: #8a2be2;
  z-index: 1;
}

.info-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 10px;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.api-name {
  display: inline-block;
  vertical-align: middle;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, #8a2be2, #3f51b5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.5s ease-in-out;
  z-index: 3;
  border-radius: 10px;
  transform: translateY(100%);
}

.slide-up-enter-active,
.slide-up-leave-active,
.overlay-slide-enter-active,
.overlay-slide-leave-active {
  transition: all 0.5s ease-in-out;
}

.slide-up-enter,
.slide-up-leave-to {
  transform: translateY(100%);
}

.slide-up-enter-active,
.slide-up-leave-active,
.overlay-slide-enter-active {
  transition: all 0.5s ease-in-out;
}

.slide-up-enter,
.slide-up-leave-to {
  transform: translateY(100%);
}

/* ... 其他样式保持不变 ... */

/* 简化并明确过渡动画状态 */
.overlay-slide-enter-active,
.overlay-slide-leave-active {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* 当overlay开始滑入时，透明度逐渐变为1，位置调整到卡片高度的1/3处 */
.overlay-slide-enter {
  opacity: 0;
  transform: translateY(-100%);
}

/* overlay滑入完成时，停留在卡片高度的1/3处 */
.overlay-slide-enter-to {
  opacity: 1;
  transform: translateY(-33.3%);
}

/* 鼠标移出时，overlay开始平滑消失，同时返回初始隐藏位置 */
.overlay-slide-leave {
  opacity: 1;
  transform: translateY(-33.3%);
}

/* 鼠标移出完成时，overlay完全透明且回到初始位置 */
.overlay-slide-leave-to {
  opacity: 0;
  transform: translateY(0);
}
/* 更新overlay的初始状态 */
.overlay {
  /* ... 其他样式保持不变 ... */
  /* 默认情况下，overlay位于隐藏位置，但设置为可见 */
  opacity: 1;
  transform: translateY(-100%);
  /* 添加初始的transition-delay，使得在页面加载时overlay不立即显示 */
  transition: opacity 0s 0.5s, transform 0s 0.5s;
}

/* 当showOverlay为true时，通过类来改变overlay的状态 */
.author-card:hover .overlay {
  /* 当鼠标悬停时，立即改变位置但不改变透明度 */
  transform: translateY(-33.3%);
  /* 移除延迟，让overlay立即开始移动 */
  transition-delay: 0s;
}

/* 当鼠标移出时，我们依赖CSS的transition-delay来模拟保持显示的效果 */
.author-card:not(:hover) .overlay {
  /* 在鼠标离开后，我们希望overlay在一段时间后再隐藏，但CSS本身不直接支持这种动态延迟 */
  /* 这里我们尝试通过设置一个较大的transition-delay来模拟，但实际中可能需要JavaScript来精确控制 */
  /* 例如，如果我们希望overlay在鼠标离开后1秒再开始隐藏动画，可以尝试如下设置，但这取决于你的具体需求 */
  /* transition-delay: 1s; */
  /* 注意：这种方法并不能精确控制在动画结束后隐藏，而是提供一个大致的延迟效果 */
}
/* ...其他原有样式保持不变... */

.overlay {
  /* ...其他样式保持不变... */
  transform: translateY(100%); /* 初始位置在底部 */
}

/* 定义overlay滑入滑出的动画 */
.overlay-slide-enter-active,
.overlay-slide-leave-active {
  transition: all 0.5s ease;
}

/* 滑入动画 */
.overlay-slide-enter {
  opacity: 0;
  transform: translateY(100%);
}

.overlay-slide-enter-to {
  opacity: 1;
  transform: translateY(
    -66.6%
  ); /* 正确调整，确保滑入后停在卡片高度的2/3处，即距离顶部1/3 */
}

/* 滑出动画 */
.overlay-slide-leave-to {
  opacity: 0;
  transform: translateY(100%);
}

.author-card {
  /* ...其他原有样式... */
}

/* 新增一个覆盖层作为白色背景 */
.info-background-cover {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(250px / 3); /* 卡片总高250px的1/3 */
  background-color: white;
  z-index: 9; /* 确保其在其他内容之上 */
}

/* 调整信息容器的位置和大小，确保与白色背景层对齐 */
.info-container {
  /* ...其他原有样式... */
  height: calc(250px / 3); /* 与白色背景层等高 */
  padding-top: 0; /* 可能需要调整以适应新的布局 */
}

/* ...其他原有样式保持不变... */
.info-container {
  position: absolute;
  bottom: 0; /* 保持底部定位 */
  width: 100%;
  /* 保证高度与白色背景层一致，并留出足够的空间给内容 */
  height: calc(250px / 3);
  padding: 10px 10px 0; /* 调整padding，底部padding设为0，防止内容被遮挡 */
  z-index: 2;
}

/* 白色背景层保持不变 */
.info-background-cover {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: calc(250px / 3);
  background-color: white;
  z-index: 9;
}
</style>
  